<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>导航条练习</title>
	<style>
		.nav{
			width:1210px;
			height:48px;
			background-color:#E8E7E3;
			margin:100px auto;
		}

		li{
			list-style:none;
		}

		.nav li{
			float:left;
			line-height:48px;
		}

		.nav a{
			display:block;
			text-decoration:none;
			color:#777777;
			font-size:18px;
			padding:0 39px;
		}

		.nav li:last-child a{
			padding:0 42px 0 41px;
		}

		.nav a:hover{
			background-color:#3F3F3F;
			color:#E8E7E3;
		}
	</style>
</head>
<body>

	<ul class="nav">
		<li>
			<a href="#">HTML/CSS</a>
		</li>
		<li>
			<a href="#">Browser Side</a>
		</li>
				<li>
			<a href="#">Server Side</a>
		</li>
		<li>
			<a href="#">Programming</a>
		</li>
		<li>
			<a href="#">XML</a>
		</li>
				<li>
			<a href="#">Web Building</a>
		</li>
				<li>
			<a href="#">Reference</a>
		</li>
	</ul>

</body>
</html>